import 'dart:async';

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:sui_shou_pai/Utils/storage_util.dart';
import 'package:sui_shou_pai/login/code.dart';
import 'package:sui_shou_pai/module/color.dart';
import 'package:sui_shou_pai/module/effect.dart';

class ForgetPasswordPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ForgetPasswordState();
  }
}

class ForgetPasswordState extends State<ForgetPasswordPage> {
  String animationType = "idle";
  final phoneFocusNode = FocusNode();
  bool isButtonEnable = true; //按钮状态  是否可点击
  String buttonText = '发送验证码'; //初始文本
  int count = 60; //初始倒计时时间
  Timer timer; //倒计时的计时器
  TextEditingController _phoneController = new TextEditingController();

  void _buttonClickListen() {
    if (_phoneController.text == "") {
      Fluttertoast.showToast(msg: "请输入手机号");
    }
    setState(() {
      if (isButtonEnable && _phoneController.text != "") {
        StorageUtil.setStringItem("phone_password", _phoneController.text);
        //当按钮可点击时
        animationType = "success";
        Future.delayed(Duration(milliseconds: 1000), () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) =>
                      CodePage(phoneNum: _phoneController.text)));
          animationType = "idle";
        });
        isButtonEnable = false; //按钮状态标记
        _initTimer();
        return null; //返回null按钮禁止点击
      } else {
        //当按钮不可点击时
        return null; //返回null按钮禁止点击
      }
    });
  }

  void _initTimer() {
    timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) {
      count--;
      setState(() {
        if (count == 0) {
          timer.cancel(); //倒计时结束取消定时器
          isButtonEnable = true; //按钮可点击
          count = 60; //重置时间
          buttonText = '发送验证码'; //重置按钮文本
        } else {
          buttonText = '重新发送($count)'; //更新文本内容
        }
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    timer.cancel(); //销毁计时器
    timer = null;
    _phoneController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Scaffold(
          body: Stack(
            children: <Widget>[
              Container(
                height: 300,
                color: greyF3F3F3,
                padding: EdgeInsets.only(top: 60, bottom: 30),
                child: FlareActor('assets/Teddy.flr',
                    shouldClip: false,
                    alignment: Alignment.bottomCenter,
                    fit: BoxFit.contain,
                    animation: animationType),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.only(top: 270),
                decoration: BoxDecoration(
                  borderRadius: borderRadiusOnlyLeftTop24(),
                  color: Colors.white,
                ),
                child: ListView(
                  padding: EdgeInsets.symmetric(vertical: 36, horizontal: 44),
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(bottom: 24),
                      child: Text(
                        '输入手机号',
                        style: TextStyle(
                            fontSize: 40, fontWeight: FontWeight.bold),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Container(
                        height: 60,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: borderRadiusAll8(),
                          color: greyF6F6F6,
                        ),
                        child: TextFormField(
                          focusNode: phoneFocusNode,
                          controller: _phoneController,
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: '手机号',
                              prefixIcon: Icon(Icons.phone_android_rounded),
                              hintStyle:
                                  TextStyle(fontSize: 20, color: Colors.grey)),
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 30),
                      child: MaterialButton(
                        onPressed: () {
                          setState(() {
                            _buttonClickListen();
                          });
                        },
                        disabledColor: Colors.grey.withOpacity(0.1),
                        //按钮禁用时的颜色
                        disabledTextColor: Colors.white,
                        //按钮禁用时的文本颜色
                        textColor: isButtonEnable
                            ? Colors.white
                            : Colors.black.withOpacity(0.2),
                        //文本颜色
                        color: isButtonEnable
                            ? Colors.blueAccent
                            : Colors.grey.withOpacity(0.1),
                        //按钮的颜色
                        splashColor: isButtonEnable
                            ? Colors.white.withOpacity(0.1)
                            : Colors.transparent,
                        child: Text(
                          buttonText,
                          style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 2),
                        ),
                        elevation: 0,
                        minWidth: 400,
                        height: 54,
                        shape: RoundedRectangleBorder(
                            borderRadius: borderRadiusAll8()),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        onTap: () {
          hindKeyBoarder();
        });
  }

  void hindKeyBoarder() {
    //输入框失去焦点
    phoneFocusNode.unfocus();
    //隐藏键盘
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }
}
